﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <h1>Our Page</h1>
    <!--01 old way to handling event, but still valid with modern browser as well
        markup within the body of html-->
    <input type="button" value="Submit" onclick="alert('foo')" />
    <!--02
    much better idea to keep seperate to script
        onclick execute a function submitForm call
        here JS file should load before user clicks on submit button -->
    <!--<input type="button" value="Submit" onclick="submitForm()" />
    <script>
        function submitForm() {
            console.log('in submit Form');
        }
    </script>-->
    <!--02
    this become input element itself and it has an id of submit1 -->
    <!--<input id="submit1" type="button" value="Submit" onclick="submitForm(this)" />
    <script>
        function submitForm(element) {
            console.log(element.id);
            //console.log(element);
        }
    </script>-->
    <!--03
    event will get to set event object
    contain the data in order to handle the event properly-->
    <!--<input id="submit1" type="button" value="Submit" onclick="submitForm(this, event)" />
    <script>
        function submitForm(element, event) {
            console.log(event.type);
            console.log(event);
        }
    </script>-->
    <!--04
    wire up the event for a button click event-->
    <!--<input id="submit1" type="button" value="Submit" />
    <script>
        var button = document.getElementById('submit1');
        button.onclick = function () {
            console.log('Button Clicked');
        }

        //wipe out the event //nothing shows
        button.onclick = null;
    </script>-->
</body>
</html>